<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>使用animattions.css</title>
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="../src/zepto.fullpage.css">
    <link rel="stylesheet" href="css/animations.css">
</head>
<body>
    <div class="wp">
        <div class="wp-inner">
            <div class="page page1">
                <div class="js-animate" data-animate="bounce" data-time="0">bounce</div>
                <div class="js-animate" data-animate="bounce" data-time="1500">bounce</div>
                <div class="js-animate" data-animate="bounce" data-time="3000">bounce</div>
            </div>
            <div class="page page2">
                <div class="js-animate" data-animate="slideDown" data-time="0">slideDown</div>
                <div class="js-animate" data-animate="slideDown" data-time="1500">slideDown</div>
                <div class="js-animate" data-animate="slideDown" data-time="3000">slideDown</div>
            </div>
            <div class="page page3">
                <div class="js-animate" data-animate="slideLeft" data-time="0">slideLeft</div>
                <div class="js-animate" data-animate="slideLeft" data-time="1500">slideLeft</div>
                <div class="js-animate" data-animate="slideLeft" data-time="3000">slideLeft</div>
            </div>
            <div class="page page4">
                <div class="js-animate" data-animate="hatch" data-time="0">hatch</div>
                <div class="js-animate" data-animate="hatch" data-time="1500">hatch</div>
                <div class="js-animate" data-animate="hatch" data-time="3000">hatch</div>
            </div>
        </div>
    </div>
    <span class="start"><b></b></span>
    <script src="js/zepto.js"></script>
    <script src="../src/zepto.fullpage.js"></script>
    <script>
        $('.wp-inner').fullpage({
            change: function (e) {
                // 移除动画属性
                $('.page').eq(e.cur).find('.js-animate').each(function() {
                    $(this).removeClass($(this).data('animate')).hide();
                });
            },
            afterChange: function (e) {
                // 添加动画属性
                $('.page').eq(e.cur).find('.js-animate').each(function () {
                    var $this = $(this);
                    var time = $this.data('time');
                    setTimeout(function () {
                        $this.addClass($this.data('animate')).show();
                    }, time)
                });
            }
        });
    </script>
</body>
</html>
